<template>
  <ContainerGroup>
    <Container>
      <div class="query-box query-main">
        <!-- <div class="label">其他选项：</div> -->
        <div class="item-box">
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">姓名：</span>
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入患者姓名"
              size="mini"
            />
          </div>
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">身份证号：</span>
            <el-input
              v-model="ruleForm.idenno"
              placeholder="请输入身份证号"
              size="mini"
            />
          </div>

          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">医生工号：</span>
            <el-input
              v-model="ruleForm.operCode"
              placeholder="请输入工号"
              size="mini"
            />
          </div>
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">创建日期：</span>
            <el-date-picker
              v-model="ruleForm.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
          <div class="query-reset-btn right-btn-container">
            <div
              v-for="(item, index) in buttonList"
              :key="index + '_'"
              class="form-item-btn"
            >
              <Button
                :type="item.type"
                :icon="item.icon"
                :loading="item.loading"
                @click="item.handlerClick"
                >{{ item.label }}</Button
              >
            </div>
          </div>
        </div>
      </div>
    </Container>
    <Container class="main" :height="height">
      <div v-loading="loading" class="wrap" style="height: 100%">
        <div class="card-container">
          <Empty v-if="prepayinList.length === 0" style="margin: 20px auto" />
          <template>
            <el-table
              v-if="prepayinList.length !== 0"
              class="table-self"
              :data="prepayinList"
              border
              :header-cell-style="{ background: '#f5f7fa' }"
              style="width: 100%"
            >
              <el-table-column prop="name" label="姓名" width="200" />
              <el-table-column prop="idenno" label="身份证" width="200" />
              <el-table-column prop="sex" label="性别" width="100">
                <template slot-scope="scope">
                  {{ scope.row.sex === "1" ? "男" : "女" }}
                </template>
              </el-table-column>
              <el-table-column prop="deptName" label="预约科室" width="250" />
              <el-table-column prop="diagName" label="主要诊断" width="400" />
              <el-table-column prop="preState" label="状态" width="120">
                <template slot-scope="scope">
                  {{
                    scope.row.preState === "1"
                      ? "预约"
                      : scope.row.preState === "0"
                      ? "取消预约"
                      : scope.row.preState === "9"
                      ? "作废"
                      : "住院处已办理"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="operCode" label="操作人" width="200">
                <template slot-scope="scope">
                  {{ scope.row.doctName }}({{ scope.row.operCode }})
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="编辑"
                      placement="top"
                    >
                      <i
                        class="el-icon-edit"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="checkDetail(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span style="margin-left: 10px">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="日间床位申请"
                      placement="top"
                    >
                      <i
                        class="el-icon-monitor"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="applyRJ(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span style="margin-left: 10px">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="集管床位申请"
                      placement="top"
                    >
                      <i
                        class="el-icon-mobile"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="applyJG(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span style="margin-left: 10px">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="打印电子住院证"
                      placement="top"
                    >
                      <i
                        class="el-icon-printer"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="printCertificate(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div style="text-align: right; padding: 8px 0 0 0">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="prev, pager, next, sizes, total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="footer-bar">
        {{ $baseInfo.COMPANY_MSG }}
      </div>
      <!-- 新增、编辑 -->
      <ManualInput
        ref="manuRef"
        :manual-input-visible.sync="ManualInputVisible"
        :manual-input-editpre-id.sync="ManualInputEditpreId"
        @handleFresh="handleFresh"
      />
    </Container>
  </ContainerGroup>
</template>
<script>
import ManualInput from "./manualInput";
import baseInfo from "@/utils/config";
import { getHandworkPrepayin } from "../../utils/apis/handworkPrepayin";
import { getPrintHospitalCertificate } from "../../utils/apis/InpatientRegistration.js";
export default {
  components: {
    ManualInput,
  },
  data() {
    return {
      ManualInputEditpreId: "",
      ManualInputVisible: false,
      height: "fill",
      // 电子住院证列表
      prepayinList: [],
      loading: true,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,

      // 查询表单（数据）
      ruleForm: {
        createTime: "",
        operCode: "",
        idenno: "",
        name: "",
      },
      buttonList: [
        {
          label: "查询",
          type: "primary",
          icon: "search",
          handlerClick: this.handlerSearch,
          loading: false,
        },
        {
          label: "重置",
          type: "info",
          icon: "reset",
          handlerClick: this.handlerReset,
        },
        {
          label: "新增",
          type: "primary",
          icon: "add",
          handlerClick: this.handlePlus,
        },
      ],
    };
  },
  mounted() {
    this.getTime();
    this._getData();
  },
  methods: {
    handleFresh() {
      this._getData();
    },
    handlePlus() {
      this.ManualInputVisible = true;
      this.$refs.manuRef.handleClearForm();
    },
    applyJG(row) {
      const routeUrl = this.$router.resolve({
        path: "/settings/bed-application",
        query: {
          preid: row.preid,
          createBy: row.doctName,
          jobnumber: row.operCode,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    applyRJ(row) {
      if (row.nurseCellCode !== "2739") {
        this.$message.error("该患者不属于二十一病区,不能预约日间服务");
        return;
      }
      const routeUrl = this.$router.resolve({
        path: "/outPublic/rejieAppointment",
        query: {
          preid: row.preid,
          createBy: row.doctName,
          jobnumber: row.operCode,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    printCertificate(row) {
      const routeUrl = this.$router.resolve({
        path: "/ManualElecHosptalCertificate/certificate",
        query: { preid: row.preid, idCard: row.idenno, deptCode: row.deptCode },
      });
      window.open(routeUrl.href, "_blank");
    },

    checkDetail(row) {
      if (row.preState !== "1") {
        return this.$message.warning(
          "该住院证住院处已办理或作废,请重新开立住院证!"
        );
      }
      this.ManualInputVisible = true;
      this.ManualInputEditpreId = row.preid;
      this.$refs.manuRef.ManualInputEdit(row.preid);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loading = true;
      this._getData();
    },
    // 查询功能
    handlerSearch() {
      this.pageNum = 1;
      this._getData();
    },
    // 重置搜索表单
    handlerReset(val) {
      this.getTime();
      this.ruleForm.operCode = "";
      this.ruleForm.idenno = "";
      this.ruleForm.name = "";
      this._getData();
    },
    _getData() {
      const params = {
        startTime: !this.ruleForm.createTime ? "" : this.ruleForm.createTime[0],
        endTime: !this.ruleForm.createTime ? "" : this.ruleForm.createTime[1],
        operCode: this.ruleForm.operCode,
        idenno: this.ruleForm.idenno,
        name: this.ruleForm.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getHandworkPrepayin(params)
        .then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.prepayinList = res.data.data.list;
            this.total = res.data.data.total;
            this.loading = false;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error("查询数据出错,请联系管理员1585257174!");
        });
    },
    getTime() {
      const gqTime = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
      const preDate =
        gqTime.getFullYear() +
        "-" +
        (gqTime.getMonth() + 1) +
        "-" +
        gqTime.getDate();
      const date =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate();
      this.ruleForm.createTime = [
        preDate + " " + "00:00:00",
        date + " " + "23:23:59",
      ];
    },
  },
};
</script>
<style lang="less" scoped>
.container.tab-bar {
  margin-top: 0;
  padding: 0 10px 5px 10px;
}
/deep/ .el-tabs__header.is-top {
  margin-bottom: 0;
}
/deep/ .el-tabs__nav-wrap::after {
  background-color: #fff;
}
.query-main {
  display: flex;
  .label {
    flex: 0 0 76px;
    padding-top: 2px;
    margin-right: 32px;
  }
  .item-box {
    flex: 1 1 auto;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    .dpt-btn {
      cursor: pointer;
      padding: 2px 8px;
      margin-bottom: 12px;
      margin-right: 12px;
    }
    .dpt-btn:hover {
      background-color: #2165f9;
      color: #fff;
      border-radius: 3px;
      transition: 0.4s;
    }
  }
}
.department {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  overflow: hidden;
  // .label{
  //   flex-grow: 2;
  // }
  .btn-area {
    flex: 0 0 76px;
    padding-top: 2px;
    margin-left: 32px;
    text-align: right;
    padding-right: 3px;
    span {
      cursor: pointer;
      color: #217dfa;
    }
    i {
      color: #217dfa;
    }
  }
}
.query-box {
  padding-top: 10px;
  .query-reset-btn {
    width: 180px;
  }
}
/deep/ .el-input {
  width: 180px;
}
.right-btn-container {
  text-align: center;
  display: flex;
  justify-content: flex-end;
  padding-top: 5px;
  .form-item-btn {
    margin: 0px 3px;
  }
  .more-text {
    display: block;
    width: 50px;
    margin-top: 6px;
    color: #2165f9;
    cursor: pointer;
    user-select: none;
  }
}
.container.main {
  overflow-y: auto;
  .card-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    height: 76vh;
  }
}

.patient-card {
  margin: 16px;
}
.selected {
  background-color: #2165f9;
  color: #fff;
  border-radius: 3px;
}
/deep/ .el-tabs__item:hover {
  color: #2165f9;
}
/deep/ .el-tabs__item.is-active {
  color: #2165f9;
}
.menu {
  height: auto;
  width: 90px;
  position: absolute;
  z-index: 99;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  .menu__item {
    display: block;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
    //   border: 1px solid #eeeeee;
    // background-color: #ffffff;
  }
}
.change-style {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-bar {
  text-align: center;
  height: 40px;
  color: #999;
  line-height: 40px;
  font-size: 14px;
}
</style>
